<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>收支表</title>
    <link href="../../css/base.css" rel="stylesheet">
    <link href="../../css/account.css" rel="stylesheet">
</head>
<body id="calender-statistic">
<div class="container">
    <div class="head">
        <i class="icon iconfont icon-jiantou1"></i>
        <h2>收支表</h2>
        <div class="select">
            <input type="checkbox" id="checkbox_all"/>
            <label for="checkbox_all"></label>全选
        </div>
    </div>

    <div class="content">
        <div class="content-head">
            <p class="content-head-left fl"><span></span>/<span></span></p>
            <div class="content-head-right fr">
                <i class="icon iconfont icon-calendar"></i>
                <div class="drop-down">
                    <ul></ul>
                </div>
            </div>
        </div>
        <div class="content-box">
            <div class="summary">
                <h3>总收入</h3>
                <div>+∞</div>
                <div class="detail"><b data-value="0"></b><br>（点击显示）</div>
            </div>
            <div class="chart" id="income"></div>
            <ul class="clearfix"></ul>
        </div>
        <div class="content-box">
            <div class="summary">
                <h3>总支出</h3>
                <div class="detail"><b data-value=""></b><br>（点击显示）</div>
            </div>
            <div class="chart" id="spend"></div>
            <ul class="clearfix"></ul>
        </div>
    </div>

    <div class="mask"></div>

</div>



<script src="../../js/rem.js"></script>
<script src="../../js/lib/jquery.js"></script>
<script src="../../js/lib/echarts.common.min.js"></script>
<script>
    /*初始化时间选择*/
    var date = new Date;
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var calender = [{y:year,m:month<10?'0'+month:month}];
    for( var i=1 ; i<5 ; i++ ){
        if( month - i < 1 ){
            var last = 12 + month - i;
            calender.push({y:year-1,m:last<10?'0'+month:last})
        }else{
            calender.push({y:year,m:month-i<10?'0'+(month-i):month-i})
        }
    }
    $('.drop-down ul').append("<li data-year="+ (year-1) +" data-month=-1>"+ (year-1) +"年收支</li>");
    calender.forEach(function (val) {
        $('.drop-down ul').append("<li data-year="+ val.y +" data-month="+val.m+">"+ val.y +"年" + val.m +"月</li>")
    });

    /*下拉菜单*/
    $('.content-head-right i').click(function () {
        $('.drop-down').fadeToggle(300,'swing');
        $('.mask').toggle()
    });

    /*百分比数值切换*/
    $(".summary .detail").click(function () {
        var dom = $(this).find('b');
        var temp = dom.text();
        dom.text(dom.data('value'));
        dom.data('value',temp);
    });

    /*echart*/
    function handle_data(data) {
        var config = [
            {name:'工资', color:'#2ba388', className:'icon-xianjin'},
            {name:'分红', color:'#d4433d', className:'icon-shouru'},
            {name:'其他', color:'#fda242', className:'icon-shenglvehao'},
            {name:'家庭', color:'#d4433d', className:'icon-tb17'},
            {name:'生活', color:'#2ba388', className:'icon-kafeiting'},
            {name:'工作', color:'#fda242', className:'icon-gongzuo'},
            {name:'娱乐', color:'#3f85fb', className:'icon-yule'}
        ];
        var incomeChart = echarts.init(document.getElementById('income'));
        var spendChart = echarts.init(document.getElementById('spend'));
        var option = {
            series : [
                {
                    type:'pie',
                    radius : ['37%', '87%'],
                    itemStyle : {
                        normal : {
                            label : {
                                show : true,
                                formatter: "{b}\n￥{c}\n{d}%"
                            }
                        }
                    },
                    center:['50%','55%']
                }
            ]
        };
        var temp = [];
        var html = "";
        data.income.forEach(function (val) {
            config.forEach(function (conf) {
                if( conf.name == val.name ){
                    temp.push(conf.color);
                    html = html + "<li><i class='icon iconfont " + conf.className + "'></i><span>" + conf.name + "</span></li>";
                    $('#income+ul').html(html);
                    return false
                }
            });
        });
        option.series[0].data = data.income;
        option.color = temp;
        incomeChart.setOption(option,true);
        temp = [];
        html = "";
        data.spend.forEach(function (val) {
            config.forEach(function (conf) {
                if( conf.name == val.name ){
                    temp.push(conf.color);
                    html = html + "<li><i class='icon iconfont " + conf.className + "'></i><span>" + conf.name + "</span></li>";
                    $('#spend+ul').html(html);
                    return false
                }
            });
        });
        option.series[0].data = data.spend;
        option.color = temp;
        spendChart.setOption(option,true);
        window.onresize = incomeChart.resize({height:160});
        window.onresize = spendChart.resize({height:160})
    }

    /*刷新数据*/
    $('.drop-down ul').on('click','li',function () {
        $('.content-head-left span').eq(0).text($(this).data('year'));
        $('.content-head-left span').eq(1).text($(this).data('month'));
        var data = {
            income_total:555,
            income_total_per:'20%',
            income:[
                {value:335, name:'工资'},
                {value:310, name:'分红'},
                {value:234, name:'其他'}
            ],
            spend_total:-557,
            spend_total_per:'-20%',
            spend:[
                {value:335, name:'生活'},
                {value:310, name:'工作'},
                {value:234, name:'娱乐'},
                {value:234, name:'家庭'}
            ]
        };
        handle_data(data);
        $("#income").parent().find(".detail b").text('+'+data.income_total_per);
        $("#income").parent().find(".detail b").data('value','+'+data.income_total);
        $("#spend").parent().find(".detail b").text(data.spend_total_per);
        $("#spend").parent().find(".detail b").data('value',data.spend_total);
        $('.drop-down').fadeOut(300,'swing');
        $('.mask').hide()
    });

    /*初始化*/
    $('.drop-down li').eq(1).click()

</script>
</body>
</html>